<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css"
          th:href="@{/assert/css/plugin/chosen/chosen.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link href="../../../assert/css/animate.min.css" rel="stylesheet" th:href="@{/assert/css/animate.min.css}">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link href="../../../assert/css/loaders.css" rel="stylesheet"
          th:href="@{/assert/css/loaders.css}">
    <link rel="stylesheet" href="../../../assert/css/city-picker.css" th:href="@{/assert/css/city-picker.css}"/>
    <link rel="stylesheet" href="../../../assert/css/jquery-ui.css" th:href="@{/assert/css/jquery-ui.css}"/>
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>

</head>
<body>
<a id="basePath" th:href="@{/}"></a>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div id="barCharts" style="height:800px;margin-top:0px;" class="charts">

        </div>
    </div>
</div>
<div th:text="${keyName}" id="keyName" class="hidden"></div>
<div th:text="${taskId}" id="taskId" class="hidden"></div>
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/echarts.min.js" th:src="@{/assert/js/echarts.min.js}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/jquery-ui.min.js" th:src="@{/assert/js/jquery-ui.min.js}"></script>
<script src="../../../assert/js/plugin/layer/laydate/laydate.js"
        th:src="@{/assert/js/plugin/layer/laydate/laydate.js}"></script>
<script src="../../../assert/js/changeTime.js" th:src="@{/assert/js/changeTime.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"
        th:src="@{/assert/js/plugin/jsTree/jstree.min.js}"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"
        th:src="@{/assert/js/plugin/chosen/chosen.jquery.js}"></script>
<script src="../../../assert/js/contabs.min.js" th:src="@{/assert/js/contabs.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/common.js" th:src="@{/assert/js/common.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/city/city-picker.data.js"
        th:src="@{/assert/js/plugin/city/city-picker.data.js}"></script>
<script src="../../../assert/js/plugin/city/city-picker.js" th:src="@{/assert/js/plugin/city/city-picker.js}"></script>

<script>
    //项目名称
    var basePath = $("#basePath").attr("href");
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
                bar.myChart.resize();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".ibox").width(winW - 20);
            $(".ibox").height(winH - 20);
        }
    };
    var bar = {
        chart: null,
        data: null,
        dataList: null,
        valueList: null,
        option: {
            title: {
                text: "关系图谱-" + $("#keyName").html()
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var category=params.data.category;
                    var name=params.data.name;
                    var str="";
                    if(category==0){
                        str=name+"<br><span class='dot c1'></span>出现次数:"+params.value;
                    }else if(category==1){
                        str=name+"<br><span class='dot c1'></span>出现次数:"+params.value;
                    }else{
                        var value=params.data.value;
                        name=params.name;
                        str=name+"<br><span class='dot c1'></span>共同出现次数:"+value;
                    }
//
                    return str;
                }
            },
            toolbox: {
                show: true,
                feature: {
                    restore: {show: true},
                    magicType: {show: true, type: ['force', 'chord']},
                    saveAsImage: {show: true}
                }
            },
//            legend: {
//                x: 'left',
//                data: ['家人', '朋友']
//            },
            animationDuration: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    name: "关键词",
                    symbolSize: function (value, params) {
                        //根据数据params中的data来判定数据大小
                        var dur=getData.max- getData.min;
                        var val=30+(value-getData.min)/(dur/(80-30));
                        if(val<30){
                            val=30;
                        }
                        if(val>80){
                            val=30;
                        }
                        return val
                    },
                    categories: [
                        {
                            name: '人物'
                        },
                        {
                            name: '家人'
                        },
                        {
                            name: '朋友'
                        }
                    ],
                    nodes: [
//                        {category: 0, name: "其他", value: 14},
//                        {category: 1, name: "管了", value: 14},
//                        {category: 1, name: "收到", value: 14},
//                        {category: 1, name: "宽带", value: 28},
                    ],
                    links: [
//                        {source: "管了", target: "其他", value: 30},
//                        {source: "收到", target: "其他", value: 29},
//                        {source: "宽带", target: "其他", value: 14},
//                        {source: "什么", target: "其他", value: 14},
//                        {source: "名字", target: "其他", value: 14},
//                        {source: "请问", target: "其他", value: 14},
//                        {source: "谢谢", target: "其他", value: 14}
                    ],
                    force: {
//                        repulsion : 110,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
//                        gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
//                        edgeLength :200,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                        edgeLength: [100,200],//线的长度，这个距离也会受 repulsion，支持设置成数组表达边长的范围
                        repulsion: 300//节点之间的斥力因子。值越大则斥力越大
                    },
                    roam: true,
                    focusNodeAdjacency: true,
                    itemStyle: {
                        normal: {
                            label : {
                                show : true
                            },
                            borderColor: '#fff',
                            borderWidth: 1,
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'

                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: false,
                            //通过回调函数设置连线上的标签
                        },
                        position: 'right',
                        formatter: '{b}',
                        color:'#000'
                    },
                    lineStyle: {
                        curveness: 0,
                        normal: {
                            show : true,
                            color: 'target',//决定边的颜色是与起点相同还是与终点相同
                        }
                    },
                    emphasis: {
                        lineStyle: {
                            width: 6
                        }
                    }
                }
            ]
        },
        init: function () {
            bar.myChart = echarts.init(document.getElementById('barCharts'));
//            bar.myChart.setOption(bar.option);
//            bar.myChart.on('click', function (param) {
//                var data = param.data;
//                var links = option.series[0].links;
//                var nodes = option.series[0].nodes;
//                if (
//                    data.source !== undefined
//                    && data.target !== undefined
//                ) { //点击的是边
//                    var sourceNode = nodes.filter(function (n) {
//                        return n.name == data.source
//                    })[0];
//                    var targetNode = nodes.filter(function (n) {
//                        return n.name == data.target
//                    })[0];
//                } else { // 点击的是点
//                }
//            });
        },
        renderOption:function(xArr,yArr){
            bar.option.series[0].nodes=xArr;
            bar.option.series[0].links=yArr;
            bar.myChart.setOption(bar.option);
        }
    };
    var getData={
        max:null,
        min:0,
        init:function(){
            bar.myChart.showLoading();
            var params={
                wordName:$("#keyName").html(),//省份的编码
                taskId: $("#taskId").text()
            };
            $.ajax({
                type: "POST",
                url: bs.getSysConfig("SJWJ_URL_PRE").value+'/dataMining/monthWordsDetail',
                dataType: "json",
                contentType: 'application/json',
                data:JSON.stringify(params),
                success: function (data) {
                    var result=[];
                    var coreWord=[];
                    var coreWordNum=[];
                    if(data.data.length>0){
                        result=data.data[0].phrases;
                        coreWord=data.data[0].coreWord;
                        coreWordNum=data.data[0].coreWordNum;
                    }
                    bar.myChart.hideLoading();
                    if (result != null) {
                        var nodes=[];
                        var links=[];
                        nodes.push({"category":0,"name":coreWord,"value":coreWordNum});
                        for(var i=0;i<result.length;i++){
                            var name=result[i].wordName;
                            var value=result[i].wordNum;
                            if(!getData.max){
                                getData.max=value;
                            }else{
                                if(getData.max<value){
                                    getData.max=value;
                                }
                            }
                            if(getData.min>value){
                                getData.min=value;
                            }
                            var phraseNum=result[i].phraseNum;
                            var obj={};
                            obj.category=1;
                            obj.name=name;
                            obj.value=value;

                            var obj1={};
                            obj1.source=name;
                            obj1.target=coreWord;
                            obj1.value=phraseNum;
                            nodes.push(obj);
                            links.push(obj1);
                        }
                        bar.renderOption(nodes,links);
                    }
                }
            });
        }
    };
    $(function () {
        resize.init();
        bar.init();
        getData.init();
    })
</script>
</body>
</html>